<template>
  <div class="app">
    <div class="imgBox" >
        <div class="title">
          <div class="titleText">
            宿舍管理看板
          </div>
          <span class="date">{{date}}  {{weekday}}</span>
        </div>
        <div class="contentBox">
          <div class="itemBox flex2 ">
            <div class="itemTitle">
              评分最高寝室排名
            </div>
            <div class="content1" v-if="scoreLowTop5List.length">
               <div class="item">
                  <div class="textBox">
                      <span>第1名</span>
                      <div class="name">{{scoreTop5List[0].roomCode}}</div>
                      <span>{{scoreTop5List[0].score}}分</span>
                  </div>
               </div>
               <div class="item">
                  <div class="textBox">
                      <span>第2名</span>
                      <div class="name">{{scoreTop5List[1].roomCode}}</div>
                      <span>{{scoreTop5List[1].score}}分</span>
                  </div>
               </div>
               <div class="item">
                  <div class="textBox">
                      <span>第3名</span>
                      <div class="name">{{scoreTop5List[2].roomCode}}</div>
                      <span>{{scoreTop5List[2].score}}分</span>
                  </div>
               </div>
               <div class="item" style="margin-left:40px;">
                  <div class="textBox">
                      <span>第4名</span>
                      <div class="name">{{scoreTop5List[3].roomCode}}</div>
                      <span>{{scoreTop5List[3].score}}分</span>
                  </div>
               </div>
               <div class="item" style="margin-right:40px;">
                  <div class="textBox">
                      <span>第5名</span>
                      <div class="name">{{scoreTop5List[4].roomCode}}</div>
                      <span>{{scoreTop5List[4].score}}分</span>
                  </div>
               </div>
            </div>
          </div>
          <div class="itemBox flex3">
            <div class="itemTitle">
              宿舍通行动态
            </div>
            <div class="content3">
                <div class="row">
                  <div class="cell">宿舍</div>
                  <div class="cell">姓名</div>
                  <div class="cell">通行时间</div>
                  <div class="cell">方向</div>
                </div>
                <div class="row" v-for="(item,index) in dormPasslList" :key="index">
                  <div class="cell">{{item.roomCode}}</div>
                  <div class="cell">{{item.personName}}</div>
                  <div class="cell">{{item.accessDate}}</div>
                  <div class="cell">{{item.purpose}}</div>
                </div>
            </div>
          </div>
          <div class="itemBox flex2">
            <div class="itemTitle">
              宿舍考勤
            </div>
            <div class="content2" style="margin-top:20px;" v-if="accessExceptionList.length">
                <div class="totalCircle">
                  <div class="sunCircle">
                    <div class="totalContent">
                      <span>{{totalDormPersonCount}}</span>
                      参与考勤
                    </div>
                  </div>
                </div>
                <pie :chartData="accessExceptionList" height="200px" :option="{ title: { text: '', left: 'center' } }" />
            </div>
          </div>
          <div class="itemBox flex2">
            <div class="itemTitle">
              扣分最高寝室排名
            </div>
            <div class="content4" v-if="scoreLowTop5List.length">
                <div class="row">
                  <div class="icon">
                    <img src="/src/assets/images/screen/0011.png" alt="">
                  </div>
                  <div class="rightInfo">
                    <div class="text">
                      <span>{{scoreLowTop5List[0].roomCode}}</span>
                      <span>{{scoreLowTop5List[0].score}}分</span>
                    </div>
                    <div class="line">
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="icon">
                    <img src="/src/assets/images/screen/0012.png" alt="">
                  </div>
                  <div class="rightInfo">
                    <div class="text">
                      <span>{{scoreLowTop5List[1].roomCode}}</span>
                      <span>{{scoreLowTop5List[1].score}}分</span>
                    </div>
                    <div class="line" style="background:#eca75f;">
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="icon">
                    <img src="/src/assets/images/screen/0013.png" alt="">
                  </div>
                  <div class="rightInfo">
                    <div class="text">
                      <span>{{scoreLowTop5List[2].roomCode}}</span>
                      <span>{{scoreLowTop5List[2].score}}分</span>
                    </div>
                    <div class="line" style="background:#f8b524;">
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="icon">
                    <img src="/src/assets/images/screen/0014.png" alt="">
                  </div>
                  <div class="rightInfo">
                    <div class="text">
                      <span>{{scoreLowTop5List[3].roomCode}}</span>
                      <span>{{scoreLowTop5List[3].score}}分</span>
                    </div>
                    <div class="line" style="background:#3d89fe;">
                    </div>
                  </div>
                </div>
                 <div class="row">
                  <div class="icon">
                    <img src="/src/assets/images/screen/0015.png" alt="">
                  </div>
                  <div class="rightInfo">
                    <div class="text">
                      <span>{{scoreLowTop5List[4].roomCode}}</span>
                      <span>{{scoreLowTop5List[4].score}}分</span>
                    </div>
                    <div class="line" style="background:#3feafb;" >
                    </div>
                  </div>
                </div>
            </div>
          </div>

          <div class="itemBox flex3">
            <div class="itemTitle">
              通行时段统计
            </div>
            <div class="content5">
                <LineMulti :chartData="accessTimeList" height="280px"  type="line"></LineMulti>
            </div>
          </div>

          <div class="itemBox flex2">
            <div class="itemTitle">
              今日未归寝学生
            </div>
            <div class="content3">
                <div class="row">
                  <div class="cell">宿舍</div>
                  <div class="cell">姓名</div>
                  <div class="cell"></div>
                </div>
                <div class="row" v-for="(item,index) in notReturnList" :key="index">
                  <div class="cell">{{item.roomCode}}</div>
                  <div class="cell">{{item.name}}</div>
                  <div class="cell" style="color:#de5e29;">{{'未归寝'}}</div>
                </div>
            </div>
          </div>
        </div>
    </div>
  </div>

</template>

<script lang="ts"  setup>
  import {ref, reactive, computed, unref, onUnmounted, onBeforeUnmount,onMounted} from 'vue';
  import {onMountedOrActivated} from "@/hooks/core/onMountedOrActivated";
  import dayjs from 'dayjs';
  import Pie from '/@/components/chart/Pie.vue';
  import Bar from '/@/components/chart/Bar.vue';
  import LineMulti from '/@/components/chart/LineMulti.vue';
  import {scoreLowTop5Api,scoreTop5Api,accessRecordApi,accessTimeStatisticsApi,notReturnListApi,accessExceptionStatistics} from './dorm.api'

  const date = ref();
  const timer = ref();
  const weekday = ref(dayjs().format('dddd')) 

  const scoreTop5List = ref([])
  const scoreLowTop5List = ref([])
  const notReturnList = ref([])

  const accessExceptionList = ref([
    // { 
    //   value: 0, 
    //   name: '正常归寝',
    //   itemStyle: {
    //         color: '#41fdef'
    //   }
    // },
    
    //  { 
    //   value: 0, 
    //   name: '请假',
    //   itemStyle: {
    //         color: '#5493e2'
    //   }
    // },
    // { 
    //   value: 0, 
    //   name: '异常',
    //   itemStyle: {
    //         color: '#e95d22'
    //   }
    // },
    // {
    //   value: 105, 
    //   name: '迟到',
    //   itemStyle: {
    //         color: '#f8b622'
    //   }
    // },
    // { 
    //   value: 30, 
    //   name: '未打卡',
    //   itemStyle: {
    //         color: '#cd71ce'
    //   }
    // },
  ])
  const dormPasslList = ref([])
  const accessTimeList = ref([])
  const accessException = ref([])
  const totalDormPersonCount = ref(0)
  
function getAccessExceptionList(){
  accessExceptionStatistics().then(res=>{
    let obj1 =  { 
      value: res[0].normalCnt, 
      name: '正常归寝',
      itemStyle: {
            color: '#41fdef'
      }
    }
    let obj2 =  {
      value: res[0].leaveCnt, 
      name: '请假',
      itemStyle: {
            color: '#5493e2'
      }
    }
    let obj3 =  {
      value: res[0].exctptionCnt, 
      name: '异常',
      itemStyle: {
            color: '#e95d22'
      }
    }
    accessExceptionList.value = []
    accessExceptionList.value.push(obj1)
    accessExceptionList.value.push(obj2)
    accessExceptionList.value.push(obj3)
    totalDormPersonCount.value = res[0].allCnt
    // accessExceptionList.value[0].value = res[0].normalCnt
    // accessExceptionList.value[1].value = res[0].leaveCnt
    // accessExceptionList.value[2].value = res[0].exctptionCnt
    console.log(111);
    console.log(accessExceptionList);
  })
}
  
function getAccessTime(){
  accessTimeStatisticsApi().then(res=>{
    let arr = []
    res.enterList.forEach(item=>{
      let obj = {
        type: '进入宿舍',
        name : item.hours,
        value : item.cnt,
      }
      arr.push(obj)
    })
    res.exitList.forEach(item=>{
      let obj = {
        type: '离开宿舍',
        name : item.hours,
        value : item.cnt,
      }
      arr.push(obj)
    })
    accessTimeList.value = arr
  })
}  

function getNotReturnList(){
  notReturnListApi().then(res=>{
    notReturnList.value =res
  })
}  
  
  
function getAccessRecord(){
  accessRecordApi().then(res=>{
    dormPasslList.value = res
  })
}

 function getScoreTop5(){
    scoreTop5Api().then(res=>{
      scoreTop5List.value = res
    })
  }

  function getScoreLowTop5(){
    scoreLowTop5Api().then(res=>{
      scoreLowTop5List.value = res
    })
  }

onMounted(()=>{
  getScoreLowTop5()
  getScoreTop5()
  getAccessRecord()
  getAccessTime()
  getNotReturnList()
  getAccessExceptionList()
})

onMountedOrActivated(()=>{
  timer.value = setInterval(function() {date.value = dayjs().format('YYYY-MM-DD HH:mm:ss');}, 1000);
})

onBeforeUnmount(()=>{
  if(timer.value) {
    clearInterval(timer.value);
    }
})



</script>

<style lang="less" scoped>

  .app{
    height: 100%;
    width: 100%;
  }
  .imgBox{
    position: relative;
    /* 目标宽高 */
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-image: url(/@/assets/images/guard/bg.png);
    background-size: cover;
    .title{
      color: #fff;
      position: relative;
      .titleText{
         position: absolute;
         left: 50%;
         top: 0px; 
         transform: translate(-50%, 0%); 
         font-size: 60px;
      }
      .date{
        position: absolute;
        right: 115px;
        top: 26px;
        font-size: 20px;
      }
    }
    .contentBox{
        background-image: url(/@/assets/images/guard/borderBg.png);
        background-size: cover;
        width: 1570px;
        height: 820px;
        margin: 60px auto 30px;
        display: flex;
        padding: 85px 30px 65px;
        flex-wrap: wrap;
        justify-content: space-around;

        .itemBox{
          background: #001e26;
          height: 320px;
          position: relative;
          border: 1px solid #21c7f9;
          border-radius: 10px;
          padding: 16px;
          .itemTitle{
            height: 45px;
            width: 260px;
            color: #fdfafd;
            font-size: 22px;
            font-weight: 600;
            display: flex;
            align-items: center;
            padding-left: 30px;
            background-image:url(/@/assets/images/guard/title.png);
            background-size:cover;
          }
        }
        .flex3{
          width: 630px;
          
        }
        .flex2{
          width: 410px;
        }
         .flex1{
          width: 1400px;
          height: 140px !important;
          display: flex;
        }
    }
  }


  .box1{
       &::before {
            content: "";
            width: 100%;
            height: 0;
            position: absolute;
            top: 0px;
            left: 0px;
            border-bottom: 29px solid #001e26;
            border-left: 29px solid #0f5eca;
            border-right: 29px solid #009eb5;
          }
          &::after {
            content: "";
            width: 100%;
            height: 0;
            position: absolute;
            bottom: 0;
            left: 0;
            border-top: 29px solid #001e26;
            border-left: 29px solid #1457c0;
            border-right: 29px solid #046cde;
          }
  }

  .contentTitle1{
    display: flex;
    width: 100%;
    padding: 5px;
    .item{
      flex: 1;
      display: flex;
      justify-content: center;
      color: #fff;
    }
  }

  .content1{
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    .item {
      width: 100px;
      height: 110px; /* 100px / sqrt(3) */
      background-color: #41fdee;
      position: relative;
      margin: 0 10px;
      clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
      .textBox{
        position: relative;
        z-index: 10;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 15px;
        .name{
          color: #fdfdfa;
          font-size: 24px;
          font-weight: 600;
        }
        span{
          color: #fefcfb;
        }
      }
      &::after{
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 90px;
        height: 100px; /* 100px / sqrt(3) */
        background-color: #011f27;
        clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
      }
        &:nth-child(2){
          background-color: #f6b720;
        }
        &:nth-child(3){
          background-color: #e95d22;
        }
        &:nth-child(4){
          background-color: #0178de;

        }
        &:nth-child(5){
          background-color: #cd72cf;

        }
    }
    
  }

  .content2{
    display: flex;
    width: 100%;
    position: relative;
    .totalCircle{
      top: 25%;
      left: 50%;
      transform: translate(-50%,0%);
      position: absolute;
      z-index: 1000;
      background: #011f27;
      width: 120px;
      height: 120px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      .sunCircle{
        border: 3px dashed #44f9ef;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        .totalContent{
          border: 3px solid #1b42c5;
          width: 90px;
          height: 90px;
          border-radius: 50%;
          color: #fffdf9;
          background: linear-gradient( to bottom,#1739a5,#188f9e);
          display: flex;
          flex-direction: column;
          align-items: center;
          span{
            font-size: 26px;
          }
        }
      }
    }
  }

  .content3{
    overflow: auto;
    height: 240px;
    .row{
      display: flex;
      .cell{
        flex: 1;
        height: 43px;
        border-top: 1px solid #2595ba;
        border-left: 1px solid #2595ba;
        color: #f2f6f4;
        display: flex;
        align-items: center;
        justify-content: center;
        &:last-child{
          border-right: 1px solid #2595ba;
        }
      }
      &:last-child{
          border-bottom: 1px solid #2595ba;
      }
      &:nth-child(odd){
        background: #0a1f34;
      }
       &:nth-child(even){
        background: #083360;
      }
    }
    
  }

  .content5{
    display: flex;
    width: 100%;
      padding: 20px 0;
    .item{
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      border-right: 2px solid #1ac9fb;
      .label{
        color: #f2f6f4;
        font-size: 18px;
        margin-right: 20px;
      }
      .val{
        font-size: 40px;
        color: #f2f6f4;
        font-weight: 600;
      }
      &:last-child{
        border-right: 0;
      }
    }
  }
  
.content4{
  padding-top: 20px;
  .row{
    display: flex;
    margin-bottom: 15px;
    
    .icon{
      width: 30px;
      height: 30px;
    }
    .rightInfo{
      margin-left: 10px;
      flex: 1;
      .text{
        display: flex;
        justify-content: space-between;
        color: #f2f6f4;
      }
     
      .line{
        height: 4px;
        width: 100%;
        border-radius: 4px;
        margin-top: 5px;
        background: #e85d20;
      }
    }
  }
}



</style>
